<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<title>订单管理</title>
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
    <link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/app.css?v">
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/app.css?v=1" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/other/all.css" rel="stylesheet" />
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<style type="text/css">
	html, body {background-color: #efeff4; padding: 0 !important}
    .mui-bar~.mui-content .mui-fullscreen {top: 44px; height: auto; }
    .mui-pull-top-tips {position: absolute; top: -20px; left: 50%; margin-left: -25px; width: 40px; height: 40px; border-radius: 100%; z-index: 1; }
    .mui-bar~.mui-pull-top-tips {top: 24px; } 
    .mui-pull-top-wrapper {width: 42px; height: 42px; display: block; text-align: center; background-color: #efeff4; border: 1px solid #ddd; border-radius: 25px; background-clip: padding-box; box-shadow: 0 4px 10px #bbb; overflow: hidden; }
    .mui-pull-top-tips.mui-transitioning {-webkit-transition-duration: 200ms; transition-duration: 200ms; }
    .mui-pull-top-tips .mui-pull-loading {/*-webkit-backface-visibility: hidden; -webkit-transition-duration: 400ms; transition-duration: 400ms;*/ margin: 0; }
    .mui-pull-top-wrapper .mui-icon, .mui-pull-top-wrapper .mui-spinner {margin-top: 7px; }
    .mui-pull-top-wrapper .mui-icon.mui-reverse {/*-webkit-transform: rotate(180deg) translateZ(0);*/ }
    .mui-pull-bottom-tips {text-align: center; background-color: #efeff4; font-size: 15px; line-height: 40px; color: #777; }
    .mui-pull-top-canvas {overflow: hidden; background-color: #fafafa; border-radius: 40px; box-shadow: 0 4px 10px #bbb; width: 40px; height: 40px; margin: 0 auto; }
    .mui-pull-top-canvas canvas {width: 40px; }
    .mui-slider-indicator.mui-segmented-control {background-color: #efeff4; }
	.noorder{height: calc(100vh - 42px);background: url('/static/wechat/img/noorder.png') no-repeat;background-size: 35%;background-position: center;}
	#sliderSegmentedControl .mui-active{color: #e4393c;border-bottom: 2px solid #e4393c}
	#sliderSegmentedControl{background: #fff;height: 40px;}
	#sliderSegmentedControl .mui-scroll{background: #fff}
	.mui-table-view-cell{padding: 0;background: #fafafa !important}
	.mui-table-view-cell:after{height: 0}

	.orderManage a{color:#333;}
	.orderManage{margin: 10px 0 0 0;}
	.storeorder{padding-top: 50px;}
	.orders_all{width: 100%;padding-bottom: 10px;z-index: 10}
	.orders_all ul li{margin-bottom: 0;}
	.orders_all ul{background: #fff}
	.mui-content{padding: 0!important}
	.mui-content>.mui-table-view:first-child{margin-top: 0}
	.mui-table-view-cell:nth-of-type(1) .orderManage{margin-top: 0}
	/*.mui-content>.mui-table-view:nth-of-type(1) .orderManage{margin-top: 0}*/
	.orderManage .shopcar{width: 100%;padding: 5px 0 0;}
	.orderManage .shopcar dl{width: 100%;overflow: hidden;margin-top: 5px;position: relative;}
	.orderManage .shopcar dl dt{width: 60px ;float:left; }
	.orderManage .shopcar dl dt img{width:100% ;vertical-align: bottom;}
	.orderManage .shopcar dl dd{width:calc(100% - 60px) ;float: right;padding-left: 10px;}
	.orderManage .shopcar dl dd:nth-of-type(1){ font-size: 10pt; line-height: 15px; height: 30px; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; padding-right: 50px;}
	.orderManage .shopcar dl dd:nth-of-type(2){ font-size: 8pt; color: #888; margin-top: 2px;}
	.orderManage .shopcar dl dd:nth-of-type(2) span { margin-right: 5px; font-size: 15pt; float: right; }
	.orderManage .shopcar dl a>span { position: absolute;top: 0;right: 0;color: #e54242;line-height: 20px;font-size: 13px;}
	.shopcar>div{border-bottom: 1px dashed #eee;}
	.orderManage .tip{padding-top: 10px;}
	.orderManage .tip dl{width: 100%}
	.orderManage .tip dl dd{line-height: 20px;color: #999;font-size: 14px}
	.orderManage .tip dl dd span{line-height: 20px;color: #333;font-size: 14px;padding-left: 10px;}
	.driver img{width: 30px;border-radius: 50%;height: 30px;float: left;margin-right: 5px;}
	.driver div{line-height: 30px;text-align: left !important}
	</style> 
</head>
<body class="storeorder">
	<div class="mui-content">
		<ul class="mui-table-view all">
			{{range .info}}
			<li class="mui-table-view-cell" data-id="{{.id}}">
			<div class="orderManage">
						<dl>
							<dt>订单编号</dt>
							<dd><span>{{.ordernum}}</span></dd>
						</dl>
						<div class="shopcar">
							{{range .shopcar}}
							<dl>
								<a href="/mobile/column/product_content?id={{.pid}}">
								<dt><img src="{{.path}}" alt=""></dt>
								<dd>{{.title}}</dd>
								<dd>规格 : {{.number}}{{.spec}}/箱<span>x{{.num}}</span></dd>
								<span>
								{{if eq .status "2"}}待备货
								{{else if eq .status "3"}}
								{{if eq .num .sendnum}}
								已备货
								{{else}}
								已提醒
								{{end}}
								{{else if eq .status "4"}}
								已取货
								{{else}}
								订单结束
								{{end}}</span>
								</a>
							</dl>
							<div>
							{{if .monicker}}
								<div class="driver"><div><img src="{{.pathname}}">司机昵称 : {{.monicker}}</div></div>
							{{end}}
								{{if eq .status "2"}}
								<div>
									<span class="ok" data-id="{{.id}}">确定备货</span>
									<span class="lost" data-id="{{.id}}">缺货</span>
								</div>
								{{end}}
							</div>
							{{end}}
						</div>
						<div class="tip">
							<dl>
								{{if ne .volume "0.00"}}
								<dd>货物体积<span>{{.volume}}立方</span></dd>
								{{end}}
								{{if ne .we "0.00"}}
								<dd>货物重量<span>{{.we}}千克</span></dd>
								{{end}}
							</dl>
						</div>
				</div>
			</li>
			{{end}}
			<div class="noorder" style="display: none;">
			</div>
		</ul>
	</div>
</body>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js"></script>
<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
{{template "wechat/public/share.html" .}}
<script type="text/javascript">
function oklost(){
	$('.ok').unbind('click')
	$('.lost').unbind('click')
$('.ok').click(function(){
	var id=$(this).attr('data-id')
	var that=$(this)
	// console.log(that.parent().parent().parent().find('dl a>span').html('已备货'))
	mui.confirm("您确定完成备货了吗?","提示",function(data){
		if(data.index){
			var oid=that.parent().parent().parent().parent().parent().attr('data-id')
			$.ajax({
				type: 'post',
				url: window.location.href,
				data:{id:id,oid:oid},
				success:function(res){
					if(res==1){
						mui.toast("完成备货成功~")
						that.parent().parent().parent().find('dl a>span').html('已备货')
						that.parent().remove()
					}else {
						mui.toast("网络繁忙,请重试~");
					}
				}
			})
		}
	})
})
$('.lost').click(function(){
	var id=$(this).attr('data-id')
	var that=$(this)
	mui.prompt("请输入您缺少的数量!","提示",function(data){
		if(data.index){
			var oid=that.parent().parent().parent().parent().parent().attr('data-id')
			$.ajax({
				type: 'post',
				url: window.location.href,
				data:{id:id,num:data.value,oid:oid},
				success:function(res){
					if(res==1){
						mui.toast("缺货提醒成功~")
						that.parent().parent().parent().find('dl a>span').html('已提醒')
						that.parent().remove()
					}else if(res==0) {
						mui.toast("网络繁忙,请重试~");
					} else {
						mui.toast("请勿填写虚假缺货数~");
					}
				}
			})
		}
	})
	document.querySelector('.mui-popup-input input').type='tel' 
})
}
oklost()
var page=2;
	$('.element').dropload({
    scrollArea : window,
    threshold: 2,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: window.location.href,
            dataType: 'json',
            data:{page:page},
            success: function(data){
   			   var res=data.info
               page+=1
              if(res){
                 for (var i=0;i<res.length;i++){
                    var li = document.createElement('li');
                    li.className="mui-table-view-cell"
 					var	html=`<div class="orderManage"> <dl> <dt>订单编号</dt> <dd><span>`+res[i].ordernum+`</span></dd>
						</dl> <div class="shopcar">`
						for(var j=0;j<res[i].shopcar.length;j++){
							html+=`<dl> <a href="/mobile/column/product_content?id=`+res[i].shopcar[j].pid+`">
								<dt><img src="`+res[i].shopcar[j].path+`" alt=""></dt>
								<dd>`+res[i].shopcar[j].title+`</dd>
								<dd>规格 : `+res[i].shopcar[j].number+res[i].shopcar[j].spec+`/箱<span>x`+res[i].shopcar[j].num+`</span></dd><span>`
							if(res[i].shopcar[j].status=="2"){
								html+=`待备货`
							}else if(res[i].shopcar[j].status=="3"){
								html+=`已备货`
								if(res[i].shopcar[j].num!=res[i].shopcar[j].sendnum){
									html+=res[i].shopcar[j].sendnum
								}
							}else if(res[i].shopcar[j].status=="4"){
								html+=`已取货`
							}else{
								html+=`订单结束`
							}
							html+=`</span></a></dl><div>`
							if(res[i].shopcar[j].monicker){
								html+=`<div class="driver"><div><img src="`+res[i].shopcar[j].pathname+`">司机昵称 : `+res[i].shopcar[j].monicker+`</div></div>`
							}
							if(res[i].shopcar[j].status==2){
								html+=`<div>
										<span class="ok" data-id="{{.id}}">确定备货</span>
										<span class="lost" data-id="{{.id}}">缺货</span>
									</div>`
							}
							html+=`</div>`
						}
						html+=`</div><div class="tip"><dl>`
						if (res[i].volume!=0.00) {
							html+=`<dd>货物体积<span>`+res[i].volume+`立方</span></dd>`
						}
						if (res[i].we!=0.00) {
							html+=`<dd>货物重量<span>`+res[i].we+`千克</span></dd>`
						}
						html+=` </dl></div></div>`
                    li.innerHTML=html
                    document.getElementsByClassName('all')[0].appendChild(li)
                    oklost()
                }
                me.resetload();
                }else{
                    mui.toast("没有更多了！");
                    $(".dropload-down").remove();
                }
            },
            error: function(xhr, type){
                mui.toast("网络慢，请重新刷新!");
                me.resetload();
            }
        });
    }
});
</script>
</html>